<template>
  <el-form label-width="150">
    <el-form-item label="SKU名称">
      <el-input
        v-model="skuParam.skuName"
        placeholder="请输入sku名称"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格（元）">
      <el-input
        v-model="skuParam.price"
        placeholder="选择价格"
        type="number"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量">
      <el-input v-model="skuParam.weight" placeholder="请输入重量"></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input
        v-model="skuParam.skuDesc"
        type="textarea"
        placeholder="请输入sku名称"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true">
        <el-form-item label="内存大小">
          <el-select placeholder="选择">
            <el-option key="1" label="256g" value="256g"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内存大小">
          <el-select placeholder="选择">
            <el-option key="1" label="256g" value="256g"></el-option>
            <el-option key="1" label="256g" value="256g"></el-option>

            <el-option key="1" label="256g" value="256g"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内存大小">
          <el-select placeholder="选择">
            <el-option key="1" label="256g" value="256g"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item
          v-for="hasAttr in spuHasAllAttr"
          :label="hasAttr.saleAttrName"
        >
          <el-select placeholder="选择" v-model="hasAttr.saleAttrAndValue">
            <el-option
              v-for="(item, index) in hasAttr.spuSaleAttrValueList"
              :key="item.id"
              :label="item.saleAttrValueName"
              :value="`${hasAttr.id}:${item.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="图片描述">
      <el-table
        @select="setDefault($event[1])"
        ref="tableComponent"
        border
        :data="imageList"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="图片">
          <template #="{ row, index }">
            <img :src="row.imgUrl" alt="" style="width: 120px; height: 120px" />
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row, index }">
            <el-button @click="setDefault(row)" type="primary" size="small">
              设置默认
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" @click="save">确定</el-button>
      <el-button type="primary" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { Scence } from '@/views/product/attr/type'
import { reqImage, reqSpuHasAllAttr } from '@/api/product/spu'
import { reqAttrList } from '@/api/attr'
import { ref } from 'vue'
import { ISingleImg } from '@/api/product/spu/type'
import { ISkuParam } from '@/api/product/spu/type'
let attrList = ref([])
let spuHasAllAttr = ref([])
let imageList = ref<ISingleImg[]>([])
let skuParam = ref<ISkuParam>({
  category3Id: '',
  spuId: '',
  tmId: '',
  skuName: '',
  price: 0,
  weight: '',
  skuDesc: '',
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
  skuDefaultImg: '',
})
let tableComponent = ref()
const emits = defineEmits(['changeSence'])
const cancel = () => {
  emits('changeSence', Scence.read)
}
const init = async (c1Id, c2Id, data) => {
  skuParam.value.category3Id = data.category3Id
  skuParam.value.spuId = data.id
  skuParam.value.tmId = data.tmId
  try {
    spuHasAllAttr.value = (await reqSpuHasAllAttr(data.id)).data
    imageList.value = (await reqImage(data.id)).data
    attrList.value = (await reqAttrList(c1Id, c2Id, data.category3Id)).data
  } catch (error) {
    console.log(error)
  }
}
const save = () => {
  console.log(spuHasAllAttr.value)

  skuParam.value.skuSaleAttrValueList = spuHasAllAttr.value.reduce(
    (prev, next) => {
      if (next.saleAttrAndValue) {
        let [attrId, valueId] = next.saleAttrAndValue.split(':')
        console.log({ attrId, valueId })

        prev.push({ attrId, valueId })
      }
      return prev
    },
    [],
  )

  console.log(skuParam.value)
}
const setDefault = (data) => {
  console.log(data)

  skuParam.value.skuDefaultImg = data.imgUrl
  tableComponent.value.clearSelection()
  tableComponent.value.toggleRowSelection(data, true)
}
defineExpose({
  init,
})
</script>

<style lang="scss" scoped>
.el-form--inline {
  width: 100%;
  .el-form-item {
    width: 29%;
  }
}
</style>
